<template>
  <div class="container">
    <p v-color="c1">hello world</p>
    <p v-color="c2" v-hello>hello world</p>
    <p v-color="c3">hello world</p>
    <input type="text" v-focus>
    <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'

export default {
  components: { MyTest },
  data () {
    return {
      c1: 'red',
      c2: 'blue',
      c3: 'green',
      uname: 'zhangsan'
    }
  },
  // directives 用于定义自定义指令
  directives: {
    // ----------------- 对象写法 -------------------
    // 指令名: {
    //   // 只执行一次，在元素插入到 DOM树 之前执行；此时它的父节点是null
    //   // (如果控制元素的样式、文本...在bind里面写)
    //   bind (el, obj) {}, // el表示使用指令的元素；obj里面包含指令的值

    //   // 只执行一次，在元素插入到 DOM树 之后执行；此时它有父节点
    //   // (如果控制元素的行为，比如获取焦点，只能在inserted里面写)
    //   inserted (el, obj) {}, // el表示使用指令的元素；obj里面包含指令的值

    //   // 数据更新后，update会执行；子组件的数据可能还没有更新
    //   // (如果不涉及父传子，就用update，没有问题)
    //   update (el, obj) {}, // el表示使用指令的元素；obj里面包含指令的值

    //   // 数据更新后，componentUpdated会执行；所有组件的数据都更新完毕
    //   // (如果涉及父传子，就用componentUpdated，才能保证没有问题)
    //   componentUpdated (el, obj) {}, // el表示使用指令的元素；obj里面包含指令的值

    //   // 只执行一次，在指令解绑的时候，会自动执行（组件销毁的时候执行）
    //   unbind (el, obj) {}, // el表示使用指令的元素；obj里面包含指令的值
    // }

    color: {
      // 在元素插入到 DOM树 之前执行；此时它的父节点是null，这个时候bind执行，而且就执行一次
      // 可以在bind中，对元素进行一些初始化的操作
      bind (el, obj) {
        // console.log(el) // el 表示使用指令的元素
        // console.log(obj) // obj.value 表示指令的值
        el.style.color = obj.value
      },
      // 虚拟DOM更新后执行（数据更新了 --> 虚拟DOM更新）
      update (el, obj) {
        el.style.color = obj.value
      }
    },
    focus: {
      // bind (el) {
      //   el.focus()
      // },
      inserted (el) {
        el.focus()
      }
    }

    // ----------------- 函数写法 -------------------
    // 如果指令只有bind和update方法，并且两个方法一样，才可以简写成函数
    // 这个函数既是bind又是update
    // 指令名 (el, obj) {}
    // color (el, obj) {
    //   el.style.color = obj.value
    // }
  }
}
</script>
